<template>
	<div class="login_page">
		<div class="content" >
			        <div class="title_img">
						<img src="/img/0-logo-dl.png"  height="140px">
						
					</div>
			        <div class="biaodan">
			            <div class="biaodan_baoguo">
			                <div class="huanying">
			                    <h2>欢迎登录</h2>
			                    <span style="font-size: 12px;">Welcome to login</span>
			                </div>
			
			                <form action="" method="post">
			                    <div class="shurukuang">
			                        <div class="shurukuang_baoguo">
			                            <img class="xiaotubiao" src="/img/1-0-2.png">
			                            <input type="text" id="phone" v-model="loginUser.phone" maxlength="11" minlength="11" class="input_sty1" placeholder="请输入手机号">
			                        </div>
			                        <div class="shurukuang_baoguo">
			                            <img class="xiaotubiao" src="/img/1-0-3.png">
			                            <input type="password" id="password" v-model="loginUser.password" class="input_sty1" placeholder="请输入登录密码">
			                        </div>
			                        <div class="shurukuang_baoguo">
			                            <img src="/img/1-0-4.png" class="xiaotubiao" >
			                            <input type="text" id="yanzhengma" class="yanzhengma" v-model="loginUser.code"  placeholder="请输入验证码">
			                            
			                            <div class="genghuan" style="margin-top: 0;">
			                                <img :src="code_base64" alt="" width="150px">
			                                <a href="##" @click="getCode">换一张</a>
			                            </div>
			                        </div>
			                    </div>
			
			                    <div class="shurukuang_dibu">
			                        <div class="jizhumima">
			                            <input id="remember" type="checkbox" style="margin-right: 5px; height: 10px;">
			                            <label for="remember">记住密码</label>
			                        </div>
			                        <div class="denglu">
			                            <input type="button"  @click="submitlogin" value="登录">
			                        </div>
			                        <div class="tip">
			                            <div class="wangjimima">
											<router-link to="/pwdRetr">忘记密码</router-link>
			                              
			                            </div>
			                            <div class="zhuce">
			                                没有账号？去<router-link to="/register">注册</router-link>
			                            </div>
			                        </div>
			                    </div>
			                </form>
			            </div>
			        </div>
			        <div class="dibu">
			            <div>
			                <span>帮助</span>
			                <span style="padding: 0 20px;">隐私</span>
			                <span>条款</span>
			            </div>
			            <div>chaiugyeo@四川有限公司</div>
			        </div>
			    </div>
				
				</div>
</template>

<script>
	export default {
		data(){
			return{
				loginUser:{
					phone:'',
					password:'',
					code:''
				},
				code_base64:''
			}
		},	
		created() {
			this.getCode();
		},
		methods:{
			
			//登录方法
			submitlogin(){
				let that=this;
				this.$http.post("/applicant/login",this.loginUser).then(res=>{
					if(res.status===200){
						localStorage.setItem("token",res.data)
						that.$router.push({path:'/index'})
					}
					
				})
			},
			
			//获取验证码
			getCode(){
				let that=this
				this.$http.get("/captcha").then(res=>{
					that.code_base64=res.data
					document.cookie=res.headers.code
				})
				
			}
		}
		
		
	}	
</script>

<style scoped>

   .login_page{
	   width: 100%;
	   background: url(../../public/img/1-0-bg.png) no-repeat;
	   background-size:cover;
	   height: 99.9%;
	   padding-top: 1px;
	   overflow: hidden;

   }
	
	
	.content {
	    margin: 0px auto ;
	    width: 600px;
	}
	
	.title_img {
	    text-align: center;
		padding-top: 20px;
	   
	}
	
	.biaodan {
	    background-color: rgba(0, 0, 0, 0.55);
	    border-radius: 5px;
	    height: 485px;
	}
	
	.biaodan_baoguo {
	    width: 500px;
	    margin: 0 auto;
	}
	
	.biaodan_baoguo>.huanying {
	    color: white;
	    text-align: center;
	    height: 135px;
	}
	
	.biaodan_baoguo>.huanying>h2 {
	    padding-top: 45px;
	}
	
	/* 表单输入框 */
	.biaodan_baoguo .shurukuang {
	    display: flex;
	    flex-direction: column;
	    height: 180px;
	}
	
	.biaodan_baoguo .shurukuang>.shurukuang_baoguo {
	    position: relative;
	}
	
	.biaodan_baoguo .shurukuang .xiaotubiao {
	    position: absolute;
	    width: 20px;
	    height: 20px;
	    top: 14px;
	    left: 20px;
	}
	
	
	.biaodan_baoguo .shurukuang>div:not(:first-child) {
	    margin-top: 20px;
	}
	
	.biaodan_baoguo .shurukuang>div {
	    flex: 1;
	}
	
	.biaodan_baoguo .shurukuang>div>input {
	    font-size: 18px;
	    outline: none;
	    border-radius: 7px;
	    border: none;
	    background-color: rgba(255, 255, 255, 0.3);
	    text-indent: 55px;
	    color: white;
	    height: 47px;
	}
	
	.biaodan_baoguo .shurukuang>div>.input_sty1 {
	    width: 100%;
	}
	
	.biaodan_baoguo .shurukuang .yanzhengma {
	    width: 240px;
	    margin-right: 16px;
	}
	
	.biaodan_baoguo .shurukuang .genghuan {
	    float: right;
	    margin-top: 20px;
	}
	
	
	/* 记住密码 */
	.biaodan_baoguo .shurukuang_dibu {
	    margin-top: 10px;
	}
	
	.biaodan_baoguo .shurukuang_dibu>.jizhumima {
	    color: white;
	    font-size: 12px;
	    margin-bottom: 10px;
	}
	
	/* 登录按钮 */
	.biaodan_baoguo .shurukuang_dibu>.denglu>input {
	    font-size: 16px;
	    color: white;
	    background-image: linear-gradient(to right, rgb(37, 42, 212), rgb(72, 179, 253));
	    width: 100%;
	    height: 50px;
	    border-radius: 7px;
	    border: 0;
	}
	
	
	/* 忘记密码和注册 */
	.biaodan_baoguo .shurukuang_dibu>.tip {
	    margin-top: 15px;
	    font-size: 12px;
	}
	
	.biaodan_baoguo .shurukuang_dibu>.tip>.wangjimima {
	    float: left;
	}
	
	.biaodan_baoguo .shurukuang_dibu>.tip>.zhuce {
	    color: white;
	    float: right;
	}
	
	.biaodan_baoguo .shurukuang_dibu>.tip>.zhuce>a {
	    color: rgb(67, 165, 232);
	    text-decoration: none;
	}
	
	
	/* 底部 */
	.content>.dibu {
	    color: white;
	    margin: 40px 0;
	    text-align: center;
	}
	
	
	
</style>
